<template>
	<view class="new_fllow">
		<view class="fllow_form">
			<view style="width: 100px;">
				<!-- <text>*</text> -->会员（卡）
			</view>
			<view class="form_input">
				<input type="text" v-model="memberCardInfo" @blur="changeInfo"
					placeholder-style="font-size:30rpx;color: #999;" placeholder="不选择即为散客消费" readonly="readonly">
			</view>
			<view class="form_right" @click="showMemberCards" style="padding-top: 10px;">
				<image style="width: 40rpx;height: 40rpx;
				margin: 0px" :src="BASE_IMG_URL+'chachong.png'" mode="scaleToFill"></image>
			</view>
		</view>
		<view class="fllow_form">
			<view>添加品项</view>
			<view class="form_right theme">
				<view>{{goods_names}}</view>
				<view @click="showGoods" class="iconfont icon-arrows_right"></view>
			</view>
		</view>

		<view class="fllow_item" v-for="(item,index) in cartGoods" :key="index">
			<view class="item_content">
				<view class="con_img">
					<image :src="BASE_IMG_URL+ 'defgoods.png'" class="headerimg" mode="scaleToFill"></image>
					<view class="main_first">
						<view class="main_title">
							<view class="first_left">
								<view>{{item.goods_name}}</view>
								<view class="fontColor">×<input type="number" v-model="item.count"
										@blur="changeInfo" placeholder-style="font-size:30rpx;color: #999;"
										style="border-width:1rpx ; text-align: center; border-color:#d2cfcf;border-style: none none solid none;width: 60px;display: inline-flex;">
									 </view> 
							</view>
							<u-icon class="u-icon" name="close-circle"   color="#f06c7a"  size="40" @click="deleteGoods(item.id)"></u-icon>
						</view>

						<view class="main_title" style="margin-top: 10px;">
							<view class="fontColor" style="width: 180px;">单价：￥<input type="digit" v-model="item.price"  step="0.01"
									@blur="changeInfo" placeholder-style="font-size:30rpx;color: #999;"
									style="border-width:1rpx ; text-align: center; border-color:#d2cfcf;border-style: none none solid none;width: 60px;display: inline-flex;">
								<u-icon v-if="item.goods_type == 1" class="u-icon" name="edit-pen" size="20"></u-icon>
							</view>
							<view class="fontColor">合计：￥{{item.totalPrice}}</view>
						</view>
						
					</view> 
				</view> 
				
				
				<view class="fllow_form" v-if="item.goods_choice_type == 0">
					<view>使用方式</view>
					<view class="form_right">
						<view>
							<radio-group @change="changeProductUserType($event, item)">
								<label class="radio"  v-for="(gut, index) in gutOptions" :key="item.value"><radio :value="gut.value" :checked="index === current" />{{gut.name}}</label>
							</radio-group>
						</view>
					</view>
				</view>
				
				<view class="con_img"> 
						
						<cashierStaffTemplate :cashierStaffs="cashierStaffs" :goods="item" :goodsId="item.id"
							title="提成员工" @delCashierStaff="delCashierStaff"></cashierStaffTemplate>
		  
				</view>
			</view>
		</view>
		<view style="height:280rpx"></view>
		<view class="bottom_nav">
			<view v-if="false" class="bottom_item_gai" @click="showModifyAchieve" style="    width: 97px">
				改业绩
			</view>
			<view class="bottom_item" @click="showPay">
				结算
			</view>
			<view class="bott_text">总价({{totalPrice}})</view>
		</view>
		<!-- 备注 -->
		<uni-popup :show="showAchievePanel === true" position="bottom" mode="fixed" @hidePopup="togglePopup('')">
			<AchievePanel ref="ap" :orderType="orderType"></AchievePanel>
		</uni-popup>
	</view>

</template>

<script>
	import {
		BASE_IMG_URL
	} from '@/util/api'
	import {
		OrderBean,
		getMemberDiscountBean,
		goodsClassTreeList,
		goodsList,
		netGetMembercard
	} from '@/api/main.js'
	import {
		netSelect,
		netKehuDetail,
		netAppointDetail,
		netMemberCardList,
		getAppointData

	} from '@/api/kehu.js'
	import {
		getAppCtx
	} from '@/api/login.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	import {
		commonF
	} from '@/common/common'
	import cashierStaffTemplate from '../components/cashierStaffTemplate';
	import AchievePanel from '../components/AchievePanel';
	export default {
		mixins: [commonF],
		components: {
			uniIcon,
			uniPopup,
			AchievePanel,
			cashierStaffTemplate
		},
		data() {
			return {
				appCtx: {},
				orderType: 1,
				gutOptions: [{
				                    value: '1',
				                    name: '领走',
				                    checked: 'true'
				                },
				                {
				                    value: '2',
				                    name: '寄存'
				                },
				                 
				                
				            ],
				            current: 0,
				memberCardId: '',
				memberId: '',
				memberName: '',
				apid: '',
				cardData: {
					cardNumber: '',
					consumeRate: '',
					cardName: '',
					cardArrears: '',
					prj_discount: '',
					prd_discount: '',
					rechargeMap: {
						rechargeSurplus: '',
						giveSurplus: ''
					}
				},
				member: {
					memberName: '',
					mobile: '',
					rechargeSurplus: '',
					giveSurplus: '',
					integral: '',
					discountPercent: '',
					adviserName: '',
					operatorName: '',
					lastConsumeTime: '',

				},
				cartgoodsNames: '',
				staffcount: 0,
				projectCarts: [],
				productCarts: [],
				orderStaffRecords: [],
				cashierStaffs: [],
				BASE_IMG_URL: BASE_IMG_URL,
				showAchievePanel: false,

				discount_amount_handle_type: 1
			}
		},

		onLoad(options) {
			var that = this;
			this.appCtx = getAppCtx()
			console.log("==========")

			if (that.appCtx.storeParameter) {
				if (that.appCtx.storeParameter.discount_amount_handle_type) {
					that.discount_amount_handle_type = that.appCtx.storeParameter.discount_amount_handle_type;
				}
			}

			if (options.apid) {
				that.apid = options.apid
				that.loadWithAppo()
			}

		},
		onShow() {
			var that = this;
			let memberCard = uni.getStorageSync('cashierMemberCard')
			if (memberCard) {
				that.memberName = memberCard.memberName;
				that.memberId = memberCard.member_id;
				if (memberCard.id) {
					that.memberCardId = memberCard.id;
					that.loadMemberCard(that.memberId, memberCard.id);
				}
			}

			let shoppCart = uni.getStorageSync('shoppCart')
			console.log(shoppCart)
			if (shoppCart) {
				this.projectCarts = []
				this.productCarts = []
				shoppCart.forEach((v, i) => {
					var goods = v;
					this.addCart(goods.id, goods);
				})
			}


			this.getDefaultCashierStaffs()
		},
		//监听  页面 卸载
		onUnload() {
			uni.removeStorageSync('orderInfo')
			uni.removeStorageSync('shoppCart')
			uni.removeStorageSync('cashierMemberCard')
			uni.removeStorageSync('cashierStaffs')
		},
		watch: {
			projectCarts: {
				handler(newv, oldv) {

					var that = this;
					newv.forEach((v, i) => {
						let goods = v;
						if (goods.goods_type == "4") {
							goods.totalPrice = 0;
						} else {
							if (goods.useMemberPrice) {
								goods.totalPrice = that.handleDiscount(Number(goods.member_price * goods.count));
								goods.consume = that.handleDiscount(Number(goods.member_price * that.consumeRate))
							} else {
								goods.totalPrice = that.handleDiscount(Number(goods.price * goods.discount * goods
									.count));
								goods.consume = that.handleDiscount(Number(goods.price * goods.discount * that
									.consumeRate))
							}
						}
					})
				},
				deep: true
			},
			productCarts: {
				handler(newv, oldv) {

					var that = this;
					newv.forEach((v, i) => {
						let goods = v;
						if (goods.goods_type == "4") {
							goods.totalPrice = 0;
						} else {
							if (goods.useMemberPrice) {
								goods.totalPrice = that.handleDiscount(Number(goods.member_price * goods.count));
								goods.consume = that.handleDiscount(Number(goods.member_price * that.consumeRate))
							} else {
								goods.totalPrice = that.handleDiscount(Number(goods.price * goods.discount * goods
									.count));
								goods.consume = that.handleDiscount(Number(goods.price * goods.discount * that
									.consumeRate))
							}
						}
					})
				},
				deep: true
			},
			cashierStaffs: {
				handler(newv, oldv) {
					var that = this;
				},
				deep: true
			},
		},
		computed: {

			memberCardInfo: function() {
				let that = this
				let info = ""
				if (that.memberName) {
					info += that.memberName
				}
				if (that.cardData && that.cardData.cardName) {
					info += "【" + that.cardData.cardName + '】'
				}
				return info
			},

			consumeRate: function() {
				let that = this
				return ((that.cardData && that.cardData.consumeRate) || 1)
			},
			goods_names: function() {

			},
			orderInfo: function() {
				var that = this;
				var orderInfo = new OrderBean(that.memberId, 1);
				orderInfo.cashierStaffs = that.cashierStaffs;
				orderInfo.memberId = that.memberId;
				orderInfo.member = that.member;
				orderInfo.cardId = that.memberCardId;
				orderInfo.memberCard = that.cardData;
				orderInfo.totalPrice = that.totalPrice; 
				orderInfo.projectCarts = that.projectCarts;
				orderInfo.productCarts = that.productCarts;
				orderInfo.appointment_id = that.apid;

				return orderInfo;
			},
			cartGoods: function() {
				return this.projectCarts.concat(this.productCarts);
			},
			totalPrice: function() {
				var that = this;
				var tp = 0;
				that.projectCarts.forEach((v, i) => {
					var goods = v;
					tp = tp + Number(goods.totalPrice);
				})
				that.productCarts.forEach((v, i) => {
					var goods = v;
					tp = tp + Number(goods.totalPrice);
				})
				if (that.rechargeAmount) {
					tp = tp + Number(that.rechargeAmount);
				}
				return Number(tp).toFixed(2);
			}
		},
		methods: {
			changeProductUserType: function(evt, item) {
				console.log("----1--2-")
			            for (let i = 0; i < this.gutOptions.length; i++) {
			                if (this.gutOptions[i].value === evt.detail.value) {
			                    this.current = i;
								if(evt.detail.value == '2') {
									item.surplus = item.count
								}
			                    break;
			                }
			            }
			        },
			loadWithAppo: function() {
				var that = this;
				netAppointDetail({
					id: this.apid
				}).then(res => {
					let appo = res.data
					if (appo) {
						if (appo.member) {
							that.loadMember(appo.member.id);
							netMemberCardList({
								memberId: appo.member.id
							}).then(res => {
								let cards = res.list
								if (cards && cards.length > 0) {
									if (appo.goods) {
										cards.forEach((v, i) => {
											if (v.card_content && v.card_content.length > 0) {
												let existed = false
												v.card_content.forEach((cardgoods, i) => {
													if (cardgoods.goods && cardgoods
														.goods.id == appo.goods.id) {
														that.loadMemberCard(appo.member
															.id, v.id);
														existed = true
														return false;
													}
												})
												if (existed) {
													return false;
												}
											}
										})
									} else {
										if (cards[0].id) {
											that.loadMemberCard(that.memberId, cards[0].id);
										} else {
											that.loadMemberCard(that.memberId);
										}

									}
								} else { //未开过卡的

								}
							})
						}
					}

				})
			},

			handleDiscount(amount) {
				var that = this;

				if (that.discount_amount_handle_type == 1) {
					return Math.floor(amount);
				} else if (that.discount_amount_handle_type == 2) {
					return amount.toFixed(2);
				} else if (that.discount_amount_handle_type == 3) {
					return amount.toFixed(1);
				} else if (that.discount_amount_handle_type == 4) {
					return amount.toFixed(0);
				}
				return Math.floor(amount)
			},
			getStaffBonusSetting: function(data) {
				return staffBonusSetting(data)
			},
			togglePopup(type) {
				this.showAchievePanel = false;
			},
			loadMember: function(member_id) {
				var that = this;
				netKehuDetail({
					id: member_id
				}).then(res => {
					this.memberId = member_id
					this.memberName = res.data.memberName
				})
			},
			loadMemberCard: function(member_id, card_id) {
				var that = this;
				if (!member_id) return false;
				that.loadMember(member_id);
				if (card_id > 0) {
					that.memberCardId = card_id;
					netGetMembercard({
						memberCardId: that.memberCardId
					}).then(res => {
						var cardData = res.data;
						that.cardData = cardData;
						that.cardType = that.cardData.cardType;
						that.cardData.consumeRate = that.cardData.consumeRate || 1;
						if (that.cardType == 10) {
							that.cardData = that.cardData.mainCard
						}

					})
				}

			},
			getStaffcountOfGoods: function(goods_id) {
				var that = this;
				let cashierStaffs = that.cashierStaffs;
				let cnt = 0
				cashierStaffs.forEach((v, i) => {
					if (v.goodsId == goods_id) {
						cnt++
					}
				})
				return cnt
			},
			getCartgoodsItem: function(goods_id) {
				var that = this;
				let cartGoods = that.cartGoods;
				let item = null
				cartGoods.forEach((v, i) => {
					if (v.id == goods_id) {
						item = v
					}
				})
				return item
			},
			changeInfo: function(e) {
				var that = this;
				uni.setStorage({
					key: 'orderInfo',
					data: that.orderInfo,
					success: function() {
						console.log('success-----chaange');
					}
				});
			},
			async addCart(goodsId, goods) {
				var that = this;
				var _goods = Object.assign({}, goods)
				 _goods._goods_id = _goods.id;
				 _goods.price = _goods.store_price;  
				 _goods.member_price = _goods.store_price;
				 if( typeof _goods.consume == 'undefined')  {
					 _goods.consume = _goods.store_price;
				 } 
				 _goods.discount = 1;

				if (_goods.cardId) { //
					_goods.goods_type = 4;
				} else {
					var memberDiscountBean = null
					await getMemberDiscountBean({
						goodsId: _goods.id,
						memberId: that.memberId,
						memberCardId: that.memberCardId
					}).then(res => {
						memberDiscountBean = res.data;
					});
					if (memberDiscountBean) {
						_goods.member_price = memberDiscountBean.member_price;
						_goods.discount = memberDiscountBean.discount;
						if(memberDiscountBean.useMemberPrice) {
						  _goods.price = _goods.member_price
						  _goods.consume = _goods.member_price;
					    }
					}
					_goods.goods_type = 1;
				}

				if (_goods.goods_choice_type == 0) {
					var exsited = false;
					that.productCarts.forEach((v, i) => {
						var old = v;
						if (old.id == _goods.id) {
							if (old.count >= _goods.surplus) { ////项目卡包含项目判断剩余次数
								alert("卡内产品剩余不足")
							} else {
								old.count = old.count + 1;
							}
							exsited = true;
							return false;
						}
					})
					if (!exsited) {
						var manual = 0;
						if (_goods.manualcost_type == 1) { //百分比手工
							manual = parseFloat(_goods.store_price * _goods.manualcost).toFixed(2)
						} else if (_goods.manualcost_type == 0) {
							manual = _goods.manualcost
						}

						if (_goods.surplus <= 0) {
							FT.warning("卡内产品剩余不足")
							return false
						}

						if (true) {
							_goods.consume = parseFloat(_goods.consume * that.consumeRate).toFixed(2)
							_goods.count = _goods.count || 1;
							_goods.surplus = 0;
							_goods.totalPrice = _goods.member_price;
						}

						that.productCarts.push(_goods);
					}
				} else {
					var exsited = false;
					that.projectCarts.forEach((v, i) => {
						var old = v;
						if (old.id == _goods.id) {
							if (old.count >= _goods.surplus) { ////项目卡包含项目判断剩余次数
								uni.showToast({
									title: "卡内产品剩余不足",
									icon: 'none'
								})
							} else {
								old.count = old.count + 1;
							}
							exsited = true;
							return false;
						}
					})
					if (!exsited) {
						var manual = 0;
						if (_goods.manualcost_type == 1) { //百分比手工
							manual = parseFloat(_goods.member_price * _goods.manualcost).toFixed(2)
						} else if (_goods.manualcost_type == 0) {
							manual = _goods.manualcost
						}

						if (_goods.surplus <= 0) {
							uni.showToast({
								title: "卡内项目剩余次数不足",
								icon: 'none'
							})
							return false
						}

						if (true) {
							_goods.consume = parseFloat(_goods.consume * that.consumeRate).toFixed(2)
							_goods.count = _goods.count || 1;
							_goods.surplus = 0;
							_goods.manual = _goods.manual || manual;
							_goods.totalPrice = _goods.member_price;
						}

						that.projectCarts.push(_goods);
					}
				}


			},
			deleteGoods: function(goodsId) {

				var that = this;
				var newCarts = [];
				that.projectCarts.forEach((prj, i) => {
					if (goodsId != prj.id) {
						newCarts.push(prj);
					}
				})
				that.projectCarts = newCarts;
				newCarts = [];
				that.productCarts.forEach((prj, i) => {
					if (goodsId != prj.id) {
						newCarts.push(prj);
					}
				})
				that.productCarts = newCarts;
			},
			reducew: function(e, goods) {
				//减
				var $this = $(e.currentTarget);
				var $input = $this.parent().find('.weui-count__number');
				var number = parseInt($input.val() || "0") - 1
				if (number < MIN) number = MIN;

				$input.val(number)
				totalPrice = (number * goods.store_price);
				goods.totalPrice = totalPrice;
				goods.count = number;
				goods.surplus = number;
			},
			plusw: function(e, goods) {
				var $this = $(e.currentTarget);
				var $input = $this.parent().find('.weui-count__number');

				var number = parseInt($input.val() || "0") + 1
				if (number > MAX) number = MAX;
				$input.val(number)

				totalPrice = (number * goods.store_price);
				goods.count = number;
				goods.surplus = number;
				goods.totalPrice = totalPrice;
			},

			showGoods() {
				uni.navigateTo({
					url: '/pagesA/crm/cashier/goods_select?memberCardId=' + this.memberCardId
				})
			},

			showMemberCards() {
				uni.navigateTo({
					url: '/pagesA/crm/cashier/member_card_list'
				})
			},

			showPay: function() {
				var that = this;
				if (that.memberName == '') {
					// uni.showToast({
					// 	title: '请设置会员姓名',
					// 	icon: 'none'
					// })
					// return;
				}
				if (that.mobile == '') {
					uni.showToast({
						title: '请设置手机号',
						icon: 'none'
					})
					return;
				}

				if (that.card_name == '') {
					uni.showToast({
						title: '请设置卡项名',
						icon: 'none'
					})
					return;
					return;
				}

				if (that.cartGoods.length == 0 && that.rechargeAmount <= 0 && that.giveAmount <= 0) {
					uni.showToast({
						title: '请设置储值或添加商品',
						icon: 'none'
					})
					return;
				}

				console.log(that.orderInfo);
				uni.setStorage({
					key: 'orderInfo',
					data: that.orderInfo,
					success: function() {
						console.log('success');
					}
				});

				uni.navigateTo({
					url: '/pagesA/crm/cashier/payment'
				})

			},
			postSubmitOrder: function() {
				var _this = this;
				window.location.href = ""

			},
		}
	}
</script>

<style lang="scss">
	.bottom_nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 24rpx;
		background-color: #fff;
		text-align: center;
		color: #999;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
		z-index: 2;

		.bottom_item {
			width: 380rpx;
			height: 80rpx;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			background: #03aa96;
			color: #fff;
			font-size: 26rpx;
		}

		.bottom_item_gai {
			width: 380rpx;
			height: 80rpx;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			background: #fff;
			color: #03aa96;
			font-size: 26rpx;
		}

		.bott_text {
			font-size: 24rpx;
			color: #03aa96;

			span {
				color: #666;
			}
		}
	}

	.new_fllow {
		margin-top: 40rpx;
		font-size: 28rpx;

		.fllow_form {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #fff;
			border-bottom: 1rpx solid #EAEAEA;
			padding: 0 24rpx;

			.form_right {
				display: flex;
				color: #999;

				image {
					width: 40rpx;
					height: 40rpx;
					margin: 28rpx 5rpx 0 0;
				}
			}

			text {
				color: #f00;
				margin-left: 10rpx;
			}

			.form_input {
				input {
					height: 92%;
					// line-height: 100rpx;
					text-align: right;
					margin-right: 10rpx;
				}
			}

			.fllow_button {
				margin-top: 15rpx;
			}
		}

		.fllow_file_li {
			padding: 24rpx 34rpx;
			background: #fff;
			border-bottom: 1rpx solid #EAEAEA;

			.fil_li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 14rpx;

				.fileimg {
					width: 20rpx;
					height: 20rpx;
				}

				.filename {
					font-size: 24rpx;
					color: #999999;
				}

				.closeimg {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.imglist {
			padding: 24rpx 34rpx;
			background: #fff;
			border-bottom: 1rpx solid #EAEAEA;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;

			.imgbox {
				width: 160rpx;
				height: 160rpx;
				margin-right: 14rpx;
				position: relative;
				margin-bottom: 24rpx;
				border: 1rpx solid #EAEAEA;

				.delimg {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					position: absolute;
					right: -16rpx;
					top: -16rpx;
					background: rgba(0, 0, 0, 0.5);
					z-index: 2;
				}

				.selfimg {
					width: 160rpx;
					height: 160rpx;
				}
			}
		}

		.fllow_area {
			background-color: #fff;
			// padding: 0 70rpx;
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;
			color: #999;

			.area_head {
				height: 100rpx;
				line-height: 100rpx;
				font-size: 32rpx;
				padding: 0 70rpx;

				text {
					color: #f00;
				}
			}

			textarea {
				width: 80%;
				height: 300rpx;
				padding: 30rpx;
				background: #f8f8f8;
				margin: 0 auto;
			}
		}

		.info_head {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 24rpx;
			color: #999;
			padding-left: 24rpx;
		}

		.affiliation {
			background-color: #fff;
			margin-bottom: 20rpx;
			padding-bottom: 40rpx;

			.aff_head {
				height: 100rpx;
				line-height: 100rpx;
				padding-left: 30rpx;

				text {
					color: #f00;
					margin-left: 10rpx;
				}
			}

			.aff_con {
				display: flex;
				text-align: center;
				flex-wrap: wrap;

				.aff_item {
					width: 100rpx;
					margin-right: 15rpx;
					border-radius: 50%;
					margin-bottom: 15rpx;

					image {
						margin-bottom: 15rpx;
						width: 60rpx;
						height: 60rpx;

					}
				}

				.affbox {
					position: relative;

					.delremind {
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						position: absolute;
						right: -16rpx;
						top: -16rpx;
						background: rgba(0, 0, 0, 0.5);
						z-index: 2;
					}
				}

				.aff_last {
					image {
						margin-bottom: 15rpx;
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}

		.follow_task {
			height: 80rpx;
			line-height: 80rpx;
		}
	}

	#btn {
		font-size: 26rpx;
		color: #fff;
		text-align: center;
		line-height: 88rpx;
		width: 500rpx;
		height: 88rpx;
		background: #03AA96;
		border-radius: 29rpx;
		margin: 30rpx auto;
	}


	.fllow_item {
		position: relative;

		.unread {
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			position: absolute;
			right: 5rpx;
			top: 5rpx;
			background: #F43F3B;
		}

		.item_data {
			margin: 30rpx 0;

			&::before {
				content: '';
				display: inline-block;
				margin: 0 15rpx 0 24rpx;
				width: 20rpx;
				height: 20rpx;
				border-radius: 10rpx;
				border: 2rpx solid #03aa96;
			}
		}

		.item_content {
			display: block;
			background-color: #fff;
			padding: 24rpx 24rpx;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
			.con_img {
				display: flex;

				.main_first {
					margin-bottom: 25rpx;
					padding-left: 25rpx;
					flex: 1;

					.main_time {
						line-height: 25px;
					}

					.main_title {
						display: flex;
						width: 100%;
						justify-content: space-between;

						.first_left {
							display: flex;

							:first-child {
								font-size: 32rpx;
								margin-right: 10rpx;
								margin-top: -3rpx;
							}

							:last-child {
								margin-top: 2rpx;
							}
						}

						.main_type {
							padding: 5rpx 20rpx;
							border-radius: 10rpx;
							color: #fff;
						}

						.daofang {
							background: #03aa96;
						}

						.genjin {
							background: #ff7800;
						}

						.other {
							background: #1CBBB4;
						}
					}

				}

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}

			.con_main {
				flex: 1;

				.main_second {
					padding-bottom: 20rpx;
				}

				.main_img {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					margin-top: 20rpx;

					.imgbox {
						padding: 10rpx;
						border-radius: 5rpx;
						border: 1rpx solid #CCCCCC;
						width: 160rpx;
						height: 160rpx;
						margin-right: 14rpx;
						margin-bottom: 14rpx;
					}
				}

				.main_third {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 20rpx 0 10rpx;

					.third_left {
						display: flex;
						align-items: center;

						.icon-clock {
							font-size: 32rpx;
						}

						.lxs_time {
							margin-left: 5px;
							font-size: 26rpx;
						}
					}

					.third_right {
						display: flex;

						.right_num {
							display: flex;

							:last-child {
								margin-right: 20rpx;
							}
						}

						.icon-arrows_right {
							margin-top: -4rpx;
						}
					}
				}

				.main_fourth {
					padding-bottom: 10rpx;
				}
			}
		}
	}
</style>
